<template>
    <div class="cust-layer" ref="custLayerRef" v-if="properties.value">
        <p ref="closeRef" style="position: absolute;font-size:16px; right:0;top:0; width: 50px;height: 50px;text-align:center;line-height:50px;color:#fff;" @click="close">
            <el-icon><Close /></el-icon>
        </p>
        <div class="title">{{properties.value.title}}</div>
        <span class="desc" ref="spanRef">{{properties.value.text}}</span>
        <!-- <div class="arrow-bottom" ref="arrowRef"></div> -->
        <img src="@/assets/img/iw_tail.png" width="65px" height="36px" style="position: absolute;bottom: -28px;"/>
    </div>
</template>

<script setup>
import { useMapStore } from '@/stores/map.js'

const mapStore = useMapStore()
const { map, seenScale } = storeToRefs(mapStore)
const customOverlay = ref(null)
const custLayerRef = ref()
// const spanRef = ref()
// const arrowRef = ref()
const closeRef = ref()
function createDOM () {
    // custLayerRef.value.onmouseover = function () {
    //     this.style.backgroundColor = 'skyblue';
    //     this.style.color = '#47ffff';
    //     spanRef.value.style.color = '#47ffff';
    //     arrowRef.value.style.top = '159px';
    //     arrowRef.value.style.borderColor = 'skyblue transparent transparent transparent';
    // };
    // custLayerRef.value.onmouseout = function () {
    //     this.style.backgroundColor = '#263352d1';
    //     this.style.color = '#47ffff';
    //     spanRef.value.style.color = '#47ffff';
    //     arrowRef.value.style.borderColor = '#263352d1 transparent transparent transparent';
    // };
    custLayerRef.value.onclick = function(e) {
        console.log(e, '点击了弹窗')
        e.stopPropagation();
    }
    closeRef.value.onclick = function (e) {
        e.stopPropagation();
        map.value.removeOverlay(customOverlay.value);  
        console.log(e, '点击了关闭按钮')
    }
    return custLayerRef.value
}

const properties = reactive({
    title: '',
    text: ''
})
const addCustOverlay = ()=>{
    map.value.addEventListener('click', addCustOverlayEvent, false);
}
const addCustOverlayEvent = (point) => {
    // TODO 仅适配transform-origion:left top缩放的情况，并且这种情况下地图层级变化会导致地图偏移问题暂时未解决
    // const {x, y} = point.pixel
    // const newPixel = new BMapGL.Pixel(x/seenScale.value, y/seenScale.value)
    // const newPoint =map.value.pixelToPoint(newPixel)
    const {
       lat, lng,
       overlay
    } = point.latlng
    const newPoint = new BMapGL.Point(lng, lat)
    // 自定义覆盖物方式
    // TODO 根据数据接口回显弹窗内容，此处暂时写死
    // properties.value = {
    //     title: '测试管网1',
    //     text: '成立于1925年，历经六百年兴衰荣辱，是世界上规模最大、保存最完整的紫禁城木结构宫殿建筑群。',
    //     imgSrc: 'https://bj.bcebos.com/v1/mapopen-pub-jsapigl/assets/images/gugong.png'
    // }
    
    // if (overlay) { 
    //     // 点击图层
    //     console.log('点击了图层')
    // } else{
    //     console.log('点击了地图')
    //     // 点击地图
    //     nextTick(()=>{
    //         console.log(lat, lng)
    //         customOverlay.value = new BMapGL.CustomOverlay(createDOM, {
    //             point: new BMapGL.Point(lng, lat),
    //             opacity: 0.5,
    //             offsetY: -50,
    //             offsetX: -100
    //         });
    //         // 将自定义覆盖物添加到地图上
    //         map.value.addOverlay(customOverlay.value);  
    //     })
    // }

    // 定义InfoWindow方式实现
    var opts = {
        width : 250, // 信息窗口宽度
        height: 100, // 信息窗口高度
        title : "测试站点1" // 信息窗口标题
    }
    // TODO接口获取
    // 
    const info = ref({})
    info.value = {
        name: '测试站点',
        parent: '测试服务站',
        square: `${100*Math.ceil(Math.random() * 10)}万㎡`,
        amount: `${1000*Math.ceil(Math.random() * 10)}万户`

    }
    // 创建InfoWindow内容
    // 站点名称:测试站点
    // 隶属服务站：测试服务站
    // 入网面积：***万㎡
    // 入网户数：***万户
    var content = `<p style='font-size:14px;color:#47ffff;'>站点名称：${info.value.name}</p>
    <p style='font-size:14px;color:#47ffff;'>入网户数：${info.value.square}</p><p style='font-size:14px;color:#47ffff;'>隶属服务站：${info.value.parent}</p><p style='font-size:14px;color:#47ffff;'>入网面积：${info.value.amount}</p>`
    
    // 创建InfoWindow
    var infoWindow = new BMapGL.InfoWindow(content, opts)
    
    // 打开信息窗口
    map.value.openInfoWindow(infoWindow, newPoint);
    
    
}
defineExpose({
    addCustOverlay
});
</script>
<style scoped lang="scss">
    .cust-layer {
        z-index: 9999;
        background-color: #263352d1;
        color: #47ffff;
        padding: 2px;
        width: 230px;
        height: 160px;
        font-size: 12px;
        border-radius: 5px;
        white-space: nowrap;
        user-select: none;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        border: 1px solid #0c88e8;
        position:relative;
        box-shadow: 0px 0px 10px #47ffff;
    }
    .title {
        display: block;
        line-height: 16px;
        font-size: 16px;
        font-weight: 700;
    }
    .desc {
        word-wrap: break-word;
        line-height: 16px;
        white-space: normal;
        padding: 10px;
        color: #47ffff;
    }
    .arrow-bottom {
        position:absolute;
        top:159px;
        left:106px;
        width:0;
        height:0;
        border-color:#263352 transparent transparent transparent;
        border-style:solid;
        border-width:10px;
        overflow: hidden;
        // box-shadow: 0px 0px 10px #47ffff;
    }
</style>
